import { Ionicons } from '@expo/vector-icons'; // 用图标库，你也可以用你自己的图标
import { useRouter } from 'expo-router';
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Cell from '../components/cell';

export default function ProfileScreen() {
  const router = useRouter();
  const user = {
    name: '张三',
    phone: '135****8888',
    avatar: require('../../assets/images/favicon.png'),
  };

  const handlePress = (id: number) => {
    if (id === 1) {
      router.push('/pages/StoreListScreen')
    } else if (id === 2) {
      router.push('/pages/MemberCardListScreen')
    } else if (id === 3) {
      router.push('/pages/ServiceListScreen')
    } else if (id === 4) {
      router.push('/pages/EmployeeListScreen')
    }else if(id ===5){
       router.push('/pages/EmployeePerformanceScreen')
    }
  };

  const features = [
    { id: 1, title: '门店管理', icon: 'storefront', color: '#FF6B6B' },
    { id: 2, title: '会员卡', icon: 'card-outline', color: '#9B59B6' },
    { id: 3, title: '服务管理', icon: 'pricetag-outline', color: '#1ABC9C' },
    { id: 4, title: '员工管理', icon: 'people-outline', color: '#F39C12' },
    { id: 5, title: '账目明细', icon: 'document-text-outline', color: '#3498DB' },
  ];

  return (
    <View style={styles.container}>
      {/* 顶部用户信息 */}
      <View style={styles.header}>
        <Image source={user.avatar} style={styles.avatar} />
        <View style={styles.userInfo}>
          <Text style={styles.username}>{user.name}</Text>
          <Text style={styles.phone}>{user.phone}</Text>
        </View>
        <TouchableOpacity style={styles.editButton} onPress={() => { }}>
          <Text style={styles.editText}>修改资料</Text>
        </TouchableOpacity>
      </View>

      {/* 横向功能区 */}
      <View style={styles.featureContainer}>
        {features.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={[styles.featureCard, { backgroundColor: item.color }]}
            onPress={() => handlePress(item.id)}
          >
            <Ionicons name={item.icon as any} size={28} color="#fff" />
            <Text style={styles.featureText}>{item.title}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* 底部功能区 */}
      <View style={styles.section}>
        <Cell title='帮助中心' showline showArrow onPress={() => { }}></Cell>
        <Cell title='推广升级' showline showArrow onPress={() => { }}></Cell>
        <Cell title='联系客服' showline showArrow onPress={() => { }}></Cell>
        <Cell title='设置' showArrow onPress={() => { }}></Cell>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f6f6f8',
  },
  header: {
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    marginBottom: 10,
  },
  avatar: {
    width: 70,
    height: 70,
    borderRadius: 35,
  },
  userInfo: {
    flex: 1,
    marginLeft: 15,
  },
  username: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  phone: {
    color: '#888',
    marginTop: 4,
  },
  editButton: {
    backgroundColor: '#007AFF',
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 6,
  },
  editText: {
    color: '#fff',
    fontSize: 14,
  },
  featureContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#fff',
    paddingVertical: 20,
    marginHorizontal: 15,
    marginTop: 10,
    borderRadius: 12,
  },
  featureCard: {
    width: 60,
    height: 60,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  featureText: {
    color: '#fff',
    fontSize: 12,
    marginTop: 4,
    textAlign: 'center',
  },
  section: {
    backgroundColor: '#fff',
    marginTop: 10,
    marginHorizontal: 15,
    borderRadius: 15,
  },
});